import React, { Component } from "react";
import { NavBar, Icon, List, InputItem, Button } from "antd-mobile";
import { Toast } from "antd-mobile";
import "./Address.scss";
import axiosToken from "../../utils/myaxios";
let token = JSON.parse(localStorage.getItem("loginToken") || "[]");

class Address extends Component {
  /* 受控表单 */
  state = {
    address: "",
    address_name: "",
    address_mobile: "",
    address_list: [],
  };
  //详细地址
  handleAddressChange = (e) => {
    this.setState({
      address: e,
    });
  };
  //收件人
  handleAddressNameChange = (e) => {
    this.setState({
      address_name: e,
    });
  };
  //联系方式
  handleAddressMobileChange = (e) => {
    this.setState({
      address_mobile: e,
    });
  };
  componentDidMount() {
    this.getaxiosList();
  }
  getaxiosList = (params) => {
    axiosToken
      .post("http://s.linweiqin.com/api/s/getUserAddressList", {
        oauth_token: token.oauth_token,
      })
      .then((res) => {
        console.log(res.wdata);
        if (res.msg === "获取成功") {
          this.setState({
            address_list: res.wdata,
          });
        } else {
          Toast.info("地址获取失败", 1);
        }
      })
      .catch((err) => Toast.info("地址获取失败", 1));
  };

  //添加地址
  handleSubmit = (params) => {
    axiosToken
      .post("http://s.linweiqin.com/api/s/createUserAddress", {
        address: this.state.address,
        address_name: this.state.address_name,
        address_mobile: this.state.address_mobile,
        oauth_token: token.oauth_token,
      })
      .then((res) => {
        Toast.info(res.msg, 1);
        this.getaxiosList();
      })
      .catch((err) => Toast.info("创建失败", 1));
  };
  //删除地址
  handlRemitem = (uaid) => {
    axiosToken
      .post("http://s.linweiqin.com/api/s/deleteUserAddress", {
        uaid: "" + uaid,
        oauth_token: token.oauth_token,
      })
      .then((res) => {
        Toast.info(res.msg, 1);
        this.getaxiosList();
      })
      .catch((err) => Toast.info("删除失败", 1));
  };
  //修改地址
  handlxiugaiitem = (uaid) => {
    Toast.info("还没做", 1);
    // axiosToken
    //   .post("/updateUserAddress", {
    //     address: this.state.address,
    //     address_name: this.state.address_name,
    //     address_mobile: this.state.address_mobile,
    //   })
    //   .then((res) => {
    //     Toast.info(res.msg, 1);
    //     this.getaxiosList();

    //   })
    //   .catch((err) => Toast.info("修改失败", 1));
  };
  handleGoToPay = (index) => {
    console.log(index);
    this.props.history.push("/pay/" + index);
  };
  render() {
    return (
      <div className="yg-address">
        {/* 地址页面导航条开始 */}
        <NavBar
          mode="light"
          className="yg-address-nav"
          icon={<Icon type="left" />}
          onLeftClick={() => window.history.go(-1)}
        >
          新增地址
        </NavBar>
        {/* 地址页面导航条结束 */}
        {/* 地址页面添加地址开始 */}
        <div className="yg-address-list">
          <List>
            <InputItem
              placeholder="收货人"
              onChange={this.handleAddressNameChange}
              value={this.state.address_name}
            >
              <div
                style={{
                  backgroundImage:
                    "url(https://zos.alipayobjects.com/rmsportal/DfkJHaJGgMghpXdqNaKF.png)",
                  backgroundSize: "cover",
                  height: "22px",
                  width: "22px",
                }}
              />
            </InputItem>
            <InputItem
              type="phone"
              placeholder="手机号码"
              onChange={this.handleAddressMobileChange}
              value={this.state.address_mobile}
            >
              手机号码
            </InputItem>
            <InputItem
              type="text"
              placeholder="请填写地址"
              onChange={this.handleAddressChange}
              value={this.state.address}
            >
              地址
            </InputItem>
          </List>
          <Button type="warning" onClick={this.handleSubmit}>
            确认
          </Button>
        </div>
        {/* 地址页面添加地址结束 */}
        {/* 地址页面列表开始 */}
        <ul className="yg-address-item">
          {this.state.address_list.map((v, i) => {
            return (
              <li className="address-item" key={v.uaid}>
                <div className="address-item-info">
                  <p>收件人：{v.address_name}</p>
                  <p>手机号：{v.address_mobile}</p>
                  <p>收获地址：{v.address}</p>
                </div>
                <div className="address-item-act">
                  <button onClick={this.handleGoToPay.bind(this, i)}>
                    选择
                  </button>
                  <button onClick={this.handlxiugaiitem.bind(this, v.uaid)}>
                    修改
                  </button>
                  <button onClick={this.handlRemitem.bind(this, v.uaid)}>
                    删除
                  </button>
                </div>
              </li>
            );
          })}
        </ul>
        {/* 地址页面列表结束 */}
      </div>
    );
  }
}

export default Address;
